﻿@model QuanLyGiaoVuUI.Models.SinhVien.BauChonDeTaiViewModel
@{
    ViewBag.Title = "BauChonDeTai";
    Layout = "~/Views/Shared/_LayoutSinhVienClient2.cshtml";
}

<br />

<style>
    .motadetai {
        color:black;
        width:500px !important;
        height:150px;
    }
    .linkdetai {
        font-weight:bold;
    }
    .taiday {
        color:red;
    }
    .ui-widget {
        padding: 5px;
    }
</style>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Đề Tài</a></li>
        <li><a href="#tabs-2">Yêu thích</a></li>
        <li>
            <div class="ui-widget">
            @*<label for="tags">Tags: </label>*@
                <span>Tìm kiếm:</span><span><input id="tags" /></span>            
            </div>
        </li>
    </ul>
    
    <div id="tabs-1">
        @if (Model.DanhSachDeTaiBauChon != null)
        {
            foreach (var detai in Model.DanhSachDeTaiBauChon)
            {
                int score = (detai.DeTai.SoLuotBauChon / QuanLyGiaoVuService.Utilities.ThamSoConstantUtility.TILEBINHCHONDETAI);
                    <div class="listDeTai">
                        <div class="mainshowdetai" id="mainshowdetai_@detai.DeTai.MaDeTai">
                            <a class="linkdetai" href="#" id="">@detai.DeTai.TenDeTai</a>
                        <div><span class="star" data-rating="5" data-score="@score"></span>
                            @if(Model.DanhSachDeTaiSinhVienBauChon!=null)
                            {
                                bool isLiked = false;
                                foreach(var dt in Model.DanhSachDeTaiSinhVienBauChon)
                                {
                                    if(detai.DeTai.MaDeTai==dt.DeTai.MaDeTai)
                                    {
                                        isLiked = true;
                                        break;
                                    }
                                }
                                if(isLiked==false)
                                {
                                    <div class="vote_t">
                                        <a class="btn_like" href="#" rel="@detai.DeTai.MaDeTai"></a>
                                        <span style="font-style:italic; color:gray;float:left;margin-left:10px;">Bình chọn: @detai.DeTai.SoLuotBauChon </span>
                                    </div>
                                }
                                else{
                                    <div class="vote_f">
                                        <a class="btn_unlike" href="#" rel="@detai.DeTai.MaDeTai"></a>
                                        <span style="font-style:italic; color:gray;float:left;margin-left:10px;">Bình chọn: @detai.DeTai.SoLuotBauChon </span>
                                    </div>
                                }
                            }                            
                        </div>
                        <div>Download tài liệu <a href="~/TaiLieu/TaiFileTaiLieu?tailieuId=@detai.DeTai.FileTaiLieu"> <span class="taiday">tại đây</span> </a></div>    
                        </div>                        
                        <div hidden="hidden" class="motadetai" style="width:700px;height:auto;" id="@detai.DeTai.MaDeTai">
                            <div>Đề tài năm học: @detai.Nam1 - @detai.Nam2</div>
                            <table class="data display datatable">
                                <tr>
                                    <th class="sorting">Mô tả</th>
                                    <th class="sorting">STT</th>
                                    <th class="sorting">Giảng Viên HD</th>            
                                    <th class="sorting">Số ĐT Liên Hệ</th>
                                </tr>
                                <tr class="gradeA odd">                
                                    <td rowspan="2" class="odd gradeX">@Html.Raw(detai.DeTai.MoTa)</td>
                                    <td>1</td>
                                    <td class="odd gradeX">@detai.HoTenGV1</td>
                                    <td class="odd gradeX"> @detai.DeTai.GiangVien1.SoDienThoai</td>
                                </tr>
                                <tr class="gradeA even">
                                    <td>2</td>
                                    <td class="odd gradeX"> @detai.HoTenGV2</td>
                                    <td class="odd gradeX">@detai.DeTai.GiangVien2.SoDienThoai</td>
                                </tr>
                            </table>
                            <table class="data display datatable">
                                <tr>
                                    <th class="sorting">STT</th>
                                    <th class="sorting">Họ Tên</th>
                                    <th class="sorting">MSSV</th>
                                </tr>
                                <tr class="gradeA even">
                                    <td class="even gradeX">1</td>
                                    <td class="even gradeX">@detai.HoTenSV1</td>
                                    <td class="even gradeX">@detai.MaSV1</td>
                                </tr>
                                <tr class="gradeA even">
                                    <td class="even gradeX">2</td>
                                    <td class="even gradeX">@detai.HoTenSV2</td>
                                    <td class="even gradeX">@detai.MaSV2</td>
                                </tr>
                            </table>
                        </div>
                    </div>
            <hr />
            }
        }
    </div>
    <div id="tabs-2">
        @if (Model.DanhSachDeTaiSinhVienBauChon != null)
        {
            foreach (var detai in Model.DanhSachDeTaiSinhVienBauChon)
            {
                int score = (detai.DeTai.SoLuotBauChon / QuanLyGiaoVuService.Utilities.ThamSoConstantUtility.TILEBINHCHONDETAI);
                    <div class="listDeTai">
                        <a class="linkdetai" href="#">@detai.DeTai.TenDeTai</a>
                        <div><span class="star" data-rating="5" data-score="@score"></span></div>    
                        <div class="vote_f">
                                        <a class="btn_unlike" href="#" rel="@detai.DeTai.MaDeTai"></a>
                                        <span style="font-style:italic; color:gray;float:left;margin-left:10px;">voted: @detai.DeTai.SoLuotBauChon </span>                            
                        </div>
                        <div>Download tài liệu <a href="~/TaiLieu/TaiFile?fileId=@detai.DeTai.FileTaiLieu"> <span class="taiday">tại đây</span> </a></div>    
                        <div hidden="hidden" class="motadetai" style="width:700px;height:auto;">
                            <div>Đề tài năm học: @detai.Nam1 - @detai.Nam2</div>
                            <table class="data display datatable">
                                <tr>
                                    <th class="sorting">Mô tả</th>
                                    <th class="sorting">STT</th>
                                    <th class="sorting">Giảng Viên HD</th>            
                                    <th class="sorting">Số ĐT Liên Hệ</th>
                                </tr>
                                <tr class="gradeA odd">                
                                    <td rowspan="2" class="odd gradeX">@Html.Raw(detai.DeTai.MoTa)</td>
                                    <td>1</td>
                                    <td class="odd gradeX">@detai.HoTenGV1</td>
                                    <td class="odd gradeX"> @detai.DeTai.GiangVien1.SoDienThoai</td>
                                </tr>
                                <tr class="gradeA even">
                                    <td>2</td>
                                    <td class="odd gradeX"> @detai.HoTenGV2</td>
                                    <td class="odd gradeX">@detai.DeTai.GiangVien2.SoDienThoai</td>
                                </tr>
                            </table>
                            <table class="data display datatable">
                                <tr>
                                    <th class="sorting">STT</th>
                                    <th class="sorting">Họ Tên</th>
                                    <th class="sorting">MSSV</th>
                                </tr>
                                <tr class="gradeA even">
                                    <td class="even gradeX">1</td>
                                    <td class="even gradeX">@detai.HoTenSV1</td>
                                    <td class="even gradeX">@detai.MaSV1</td>
                                </tr>
                                <tr class="gradeA even">
                                    <td class="even gradeX">2</td>
                                    <td class="even gradeX">@detai.HoTenSV2</td>
                                    <td class="even gradeX">@detai.MaSV2</td>
                                </tr>
                            </table>
                            @*<div>Đề tài: @Html.Raw(detai.DeTai.MoTa) (GVHD: @detai.HoTenGV1, @detai.HoTenGV2)</div>*@                            
                        </div>
                    </div>
            }
        }
    </div>
</div>        
<div id="chiTietDeTaiDialog">   
    <div id="chitietmain"></div> 
    <div id="chitietmaincontent"></div>
</div>
<script type="text/javascript" src="@Url.Content("~/Content/js/jsToastMessage/javascript/jquery.toastmessage.js")"></script>
<script type="text/javascript">
            var availableTags = [];
           @if (Model != null && Model.DanhSachDeTaiBauChon != null) {
               foreach (var item in Model.DanhSachDeTaiBauChon)
                   {
                        <text>
                            availableTags.push({ id: "@item.DeTai.MaDeTai", value:"@Html.Raw(item.DeTai.TenDeTai) - Năm học: @item.Nam1 - @item.Nam2" });
                        </text>
                   }
           }
</script>
       
    
<script type="text/javascript">
    // Create the tooltips only on document load
    $(document).ready(function () {

        $.fn.qtip.styles.mystyle = { // Last part is the name of the style
            width: "auto",
            height:"auto",
            background: 'white',
            color: 'black',
            textAlign: 'left',
            border: {
                width: 7,
                radius: 5,
                color: '#A2D959'
            },
            tip: true, // Give it a speech bubble tip with automatic corner detection
            name: 'cream'
        }

        // Notice the use of the each method to gain access to each element individually
        $('.listDeTai a.linkdetai').each(function () {
            // Grab the URL from our link
            var url = encodeURIComponent($(this).attr('href')),
            
            // Create image thumbnail using Websnapr thumbnail service
            thumbnail = $('<img />').attr({
                src: 'http://m.f14.photo.zdn.vn/upload/original/2012/12/23/00/07/14/135619603481190_320_320.jpg',
                alt: 'Loading thumbnail...',
                width: 602,
                height: 252
            });
            var svcontent = $(this).parent().parent().children('.motadetai');
            // Setup the tooltip with the content
            $(this).qtip(
            {
                content: svcontent,
                style: 'mystyle',
                position: {
                    corner: {
                        tooltip: 'bottomMiddle',
                        target: 'topMiddle'
                    }
                }
            });
        });
        $('.star').each(function (index) {
            var sc = $(this).attr('data-score');
            $(this).raty({
                readOnly: true,
                half: true,
                score: sc,
                hints: ['thấp', 'trung bình', 'khá tốt', 'rất tốt', 'được đánh giá cao'],
                noRatedMsg: 'chưa được xếp hạng!'
            });
        });
        
        $('.btn_like').click(function () {
            var MaDeTai = $(this).attr('rel');
            $.post('/SinhVien/BauChonDeTai', { MaDeTai: MaDeTai, action: 1 }, function (data) {                
                ThongBao(data, url);
            });
        });
        $('.btn_unlike').click(function () { 
            var MaDeTai = $(this).attr('rel');
            $.post('/SinhVien/BauChonDeTai', { MaDeTai: MaDeTai, action: -1 }, function (data) {
                ThongBao(data, url);
            });
        });

        //var availableTags = [
        //   { id: "11", value: "ActionScript" },
        //   { id: "12", value: "AppleScript" },
        //   { id: "13", value: "Asp" },
        //   { id: "14", value: "BASIC" },
        //   { id: "15", value: "C" },
        //   { id: "11", value: "ActionScript" },
        //   { id: "12", value: "AppleScript" },
        //   { id: "13", value: "Asp" },
        //   { id: "14", value: "BASIC" },
        //   { id: "15", value: "C" },
        //   { id: "11", value: "ActionScript" },
        //   { id: "12", value: "AppleScript" },
        //   { id: "13", value: "Asp" },
        //   { id: "14", value: "BASIC" },
        //   { id: "15", value: "C" }
        //];        

        $("#tags").autocomplete({
            source: availableTags,
            max: 2,
            autoFill: true,
            mustMatch: true,
            matchContains: false,
            scrollHeight: 30,
            select: function (event, ui) {                
                //$("#chiTietDeTaiDialog").dialog(opt).dialog("open");
                //alert(ui.item.id);
                //$('#hiddenField').val(ui.item.id);
                showDetail(ui);
            }
        });
    });
    var opt = {
        autoOpen: false,
        modal: true,
        width: 530,
        height: "auto",
        title: "Chi tiết đề tài",
    };
    var url = "/SinhVien/BauChonDeTai";
    function showDetail(ui) {
        $("#chitietmain").html($("#mainshowdetai_"+ui.item.id).html());
        $("#chitietmaincontent").html($("#" + ui.item.id).html());
        $("#chiTietDeTaiDialog").dialog(opt).dialog("open");        
        $('.btn_like').click(function () {
            var MaDeTai = $(this).attr('rel');
            $.post('/SinhVien/BauChonDeTai', { MaDeTai: MaDeTai, action: 1 }, function (data) {
                ThongBao(data, url);                
            });
        });
        $('.btn_unlike').click(function () {
            var MaDeTai = $(this).attr('rel');
            $.post('/SinhVien/BauChonDeTai', { MaDeTai: MaDeTai, action: -1 }, function (data) {
                ThongBao(data, url);
            });
        });
    }
    function ThongBao(data, url) {
        if (data.success) {
            ToastManager.showSuccessToast(data.message);
            setTimeout(function () {
                refreshPage(url);
            }, 2000);
        }
        else {
            ToastManager.showStickyWarningToast(data.message);
        }
    }
    function refreshPage(url) {
        window.location = url;
    }
  </script>